<template>
  <view class="indexBody">
    <custom-navbar :immersive="true" title="设置" color="#333"> </custom-navbar>
    <view :style="{ paddingTop: `${navbarHeight}px` }"></view>
    <view class="content_model">
    
      <view class="content_model_row" @click="goUserInfo">
        <view class="content_model_row_txt">个人资料</view>
        <uni-icons type="right" size="20" />
      </view>
      <view class="content_model_line"></view>
      <view class="content_model_row" @click="changePass">
        <view class="content_model_row_txt">修改密码</view>
        <uni-icons type="right" size="20" />
      </view>
      <view class="content_model_line"></view>
      <view class="content_model_row" @click="goCitizenCard">
        <view class="content_model_row_txt">实名认证</view>
        <view v-if="realStatus" :class="realStatus !== '0' ? 'green' : ''">{{ realStatus === '0' ? '未实名' : '已实名' }}</view>
        <uni-icons type="right" size="20" />
      </view>
      <view class="content_model_line"></view>
      <view class="content_model_row" @click="goCitizenBind">
        <view class="content_model_row_txt">市民卡绑定</view>
        <uni-icons type="right" size="20" />
      </view>
    </view>

    <view class="bottom" v-if="showQuit">
      <button @click="quit">退出登录</button>
    </view>

    <uni-popup ref="popup">
      <view class="pop-pic"><image :src="qrCodeImg" mode="widthFix" show-menu-by-longpress /></view>
    </uni-popup>
  </view>
</template>

<script>
import { getToken, getUserInfo, clearToken, clearUserInfo } from '@/service/auth.js'

import { getQRCode } from '@/service/api/mine'
import { getScreen } from '@/service/auth'

import navbarMixin from '@/mxins/navbar.js'
import { getRealInfo } from '@/service/api/citizen.js'
export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},

      showCode: false,
      orderViewUsing: {},
      update: {
        oldPassword: '',
        newPassword: '',
      },
      height: 0,

      imageStyles: {
        width: 200,
        height: 200,
      },

      cuIndex: 0,
      filePath: '',
      appletExtraDict: {},
      customerTypeList: [],
      userList: [],
      areaList: [],
      deptList: [],
      saleSystemList: [],
      settlementList: [],
      qrCodeImg: '',
      val: '',
      realStatus: '',
      showQuit: true,
    }
  },
  onLoad() {
    // this.onGet()
    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (!this.user) {
      this.showQuit = false
    }
    // if (this.user) {
    //   this.getQR()
    // }

    this.getCitizenInfo()
  },
  onShow() {
    const app = getApp()
  },
  created() {
    const { height } = getScreen()
    this.height = height
  },

  methods: {
    goUserInfo() {
      uni.navigateTo({
        url: '/pageShopping/userInfo/index',
      })
    },
    getCitizenInfo() {
      // this.uniShowLoading()
      getRealInfo()
        .then(res => {
          console.log('res', res)
          // 实名认证状态(实名绑定状态0-未实名 1-已实名未绑卡 2-已绑定)
          this.uniHideLoading()
          const info = res.data
          if (info) {
            this.realStatus = res.data.status
          }
        })
        .catch(err => {
          // this.uniHideLoading()
          this.uniShowToast(err.msg)
        })
    },

    showQrCode() {
      console.log('show')
      this.$refs.popup.open()
    },
    onGet() {
      const data = getUserInfo()
      this.user = JSON.parse(data)
    },

    select(e) {
      this.filePath = e.tempFilePaths[0]
    },
    jump() {
      uni.switchTab({
        url: '/pages/mine/order/index',
      })
    },

    updatePassWord() {
      if (!this.update.oldPassword) {
        this.uniShowToast('请输入原密码')
        return
      }
      if (!this.update.newPassword) {
        this.uniShowToast('请输入新密码')
        return
      }
      updatePassword(this.update).then(res => {
        uni.showToast({ title: res.msg })
        if (res.status === 200) {
          uni.navigateTo({ url: '/pages/login/index' })
        }
      })
    },
    personnel() {
      this.personnelHeight = this.personnelHeight ? 0 : 270
      this.personnelRetate = this.personnelHeight ? 90 : 0
    },
    goCoupon() {
      uni.navigateTo({
        url: '/pageShopping/coupon/receivedList',
      })
    },
    quit() {
      uni.showModal({
        content: '是否退出登录',

        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('userPhone')
            uni.removeStorageSync('userPassward')
            uni.removeStorageSync('warehouse')
            this.$store.commit('clearCart')
            clearUserInfo()
            clearToken()
            uni.reLaunch({ url: '/pages/login/index' })
          } else if (res.cancel) {
          }
        },
      })
    },
    generateQrCode(data) {
      console.log('data', data)
      this.qrCodeImg = data
    },
    changePass() {
      uni.navigateTo({
        url: '/pageShopping/updatePassword/index',
      })
    },
    getQR() {
      const _this = this
      //生成小程序二维码
      const data = {
        path: `/pages/register/index?userId=${this.user.userId}`,
        companyCode: '000',
      }
      getQRCode(data).then(res => {
        // console.log('获取二维码',res)
        //   let base64 = wx.arrayBufferToBase64(res.data.qr_code)

        this.qrCodeImg = 'data:image/PNG;base64,' + res.data.qr_code
        // console.log('二维码',this.codeImg)
      })
    },
    async goCitizenCard() {
      if (this.realStatus && this.realStatus !== '0') {
        return this.uniShowToast('您已实名')
      }
      console.log('user', this.user.userId)
      await this.checkRealStatus()
      this.goCitizen(this.user.userId)
    },
    async goCitizenBind() {
      await this.checkRealStatus()
      if (this.realStatus === '0') {
        return uni.showModal({
          title: '未实名',
          content: '请先实名',
          success: res => {
            if (res.confirm) {
              this.goCitizenCard()
            } else if (res.cancel) {
            }
          },
        })
      }
      uni.navigateTo({
        url: '/pageShopping/citizen/index',
      })
    },
    checkRealStatus() {
      if (!this.realStatus) {
        return uni.showModal({
          title: '',
          content: '请先获取实名状态',
          success: res => {
            if (res.confirm) {
              this.getCitizenInfo()
            } else if (res.cancel) {
            }
          },
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/* .fw_btn {
    width: 80rpx;
    height: 50rpx;
    font-size: 26rpx;
    margin: 10rpx;
    padding: 0;
  } */
.updatePassword {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  background-color: white;
  padding: 5rpx 0 5rpx 30rpx;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  image {
    width: 30rpx;
  }
  .promotion {
    margin: 0 20rpx 0 5rpx;
  }
}

.promotionCode {
  position: absolute;
  top: 0;
  right: 0;
  image {
    width: 80rpx;
    height: 80rpx;
  }
}

.indexBody {
  position: relative;
  background: linear-gradient(to bottom, #edfff1 10%, #f6f6f6 48%);
  width: 100vw;
  .content {
    padding: 30rpx 0 0 30rpx;
    .userBox {
      position: relative;
      z-index: 1;
      .img {
        background: white;
        width: 150rpx;
        height: 150rpx;
        border-radius: 150rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .userInformation {
        margin-left: 30rpx;
        .name {
          margin-top: 30rpx;
          color: #333;
          font-size: 40rpx;
        }
        .change-pass {
          background-color: white;
          color: #26bb55;
          border-radius: 30rpx;
          padding: 3rpx 10rpx;
          font-size: 26rpx;
        }
        .bor {
          background: rgba(255, 255, 255, 0.2);
          min-width: 90rpx;
          height: 30rpx;
          border-radius: 30rpx;
          color: rgba(255, 255, 255, 0.8);
          font-size: 20rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .content_model {
    background-color: white;
    padding: 0 20rpx;

    &_row {
      display: flex;
      align-items: center;
      padding: 30rpx 0;

      image {
        width: 40rpx;
      }
      &_txt {
        margin-left: 20rpx;
        flex: 1;
      }
    }
    &_line {
      height: 1rpx;
      background-color: #f5f5f5;
    }
  }
  .content_pic {
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    margin: 0 20rpx;
  }
  .bottom {
    position: fixed;
    bottom: 100rpx;
    left: 20rpx;

    right: 20rpx;
    button {
      background-color: white;
    }
  }
}
.pop-pic {
  width: 300rpx;
}
.green {
  color: #26bb55;
}
</style>
